<template>
	<view class="big_img">
		<view>
			<swiper class="swiper" :current="imgsrc">
				<swiper-item v-for="item in imgArr" @click="fangda(item)">
					<image class="img1" :src="item" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="big_box1"><image @click="show()" class="img2" src="../static/85.png" mode=""></image></view>
		</view>
		<view class="suofang" v-if="suo_sta==1">
			<movable-area scale-area>
				<movable-view direction="all" @scale="onScale" scale="true" scale-min="0.5" scale-max="4" :scale-value="scale">
					<image :src="suoImg" mode="widthFix"></image>
				</movable-view>
			</movable-area>
			<view class="big_box2"><image @click="show1()" class="img2" src="../static/85.png" mode=""></image></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curItemIndex:0,
				suoImg:'',
				suo_sta:0
			}
		},
		props:['imgsrc','imgArr'],
		mounted() {
			console.log(this.imgsrc,22)
			console.log(this.imgArr,11)
		},
		methods: {
			
			show1:function(){
				this.suo_sta = 0
			},
			fangda:function(item){
				console.log(item)
				this.suoImg = item
				this.suo_sta = 1
			},
			show:function(){
				this.$emit('b_show',false)
			}
		}
	}
</script>

<style>
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height:100%;
	}
	
	movable-area {
		height: 100%;
		width: 100%;
		position:fixed;
		overflow: hidden;
	}
		
	movable-view image{
		width:100%;
	}
	
	.suofang>image{
		width: 640rpx;
		height: 480rpx;
	}
	.suofang{
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000000;
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid red;
	}
	.swiper{
		border: 5px solid #CCCCCC;
		border-radius: 10rpx;
		width: 516rpx;
		height: 410rpx;
	}
	.big_box2{
		margin: 30rpx auto;
		position: absolute;
		top: 100rpx;
		display: flex;
		justify-content: center;
	}
	.big_box1{
		margin: 30rpx auto;
		display: flex;
		justify-content: center;
	}
	.img2{
		width: 80rpx;
		height: 80rpx;
	}
	.img1{
		width: 516rpx;
		height: 410rpx;
	}
	.big_img{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.3);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10000;
	}
</style>
